<template>
    <div class="app-container">
        <el-divider content-position="left">编辑迎新内容</el-divider>
        <el-form ref="form" :model="entranceFormData" label-width="100" :rules="rules"  :loading="loading">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="entranceFormData.title" style="width:80%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="学期" prop="semester">
                        <el-select v-model="entranceFormData.semester"  placeholder="请选择" style="width:80%">
                            <el-option
                                    v-for="item1 in termTimeList"
                                    :key="item1.id"
                                    :label="item1.tetiBeginYear+'~'+item1.tetiEndYear"
                                    :value="item1.id"
                            >
                            <span style="float: left">{{ item1.tetiBeginYear+'~'+item1.tetiEndYear }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item1.remarks }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="迎新类型" >
                        <el-select v-model="entranceFormData.entranceType"  placeholder="请选择" style="width:80%">
                            <el-option  value="1" label="迎新活动介绍"></el-option>
                            <el-option  value="2" label="收费明细"></el-option>
                            <el-option  value="3" label="报道流程"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="是否有效" >
                        <el-radio v-model="entranceFormData.status" label="1">有效</el-radio>
                        <el-radio v-model="entranceFormData.status" label="0">无效</el-radio>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="内容" prop="context">
                <!-- <quill-editor style="margin-left: 50px;"
                    v-model="entranceFormData.context"
                    ref="myQuillEditor"
                    :options="editorOption"
                >
                </quill-editor> -->
                <editor :value="entranceFormData.context" @input="updateContext"></editor>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center; margin-top: 20px;">
            <el-button type="warning" @click="viewContent" icon="el-icon-search" size="mini" :loading="loading">预 览</el-button>
            <el-button type="primary" @click="submitForm" icon="el-icon-check" size="mini" :loading="loading">提 交</el-button>
            <el-button @click="cancel" size="mini" icon="el-icon-close">取 消</el-button>
        </div>

        <!--预览-->
        <el-dialog title="预览" :visible.sync="open" width="40%" >
            <el-divider content-position="center">
                <el-select size="mini" v-model="selectModelData" placeholder="选择机型" @change="selectModel">
                    <el-option label="IPhoneSE" value="375,667" ></el-option>
                    <el-option label="IPhoneXR" value="414,896"></el-option>
                    <el-option label="IPhone12 PRO" value="390,844"></el-option>
                    <el-option label="Pixel 5" value="393,851"></el-option>
                    <el-option label="Galaxy Fold" value="280,653"></el-option>
                </el-select>
            </el-divider>
            <div>
                <div class="modelDiv" :style="modelStyle">
                    <div  style="text-align: center;"><h2>{{viewData.title}}</h2></div>
                    <div v-html="viewData.context"></div>
                </div>
            </div>
            
        </el-dialog>
    </div>
  </template>
  
<script>
import  {quillEditor}  from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { listTermtime } from "@/api/system/termtime.js";
import { addOrUpdateEntranceProcess , findEntranceProcessDetailById} from "@/api/studentInfo/entranceProcess";
import { getToken } from '@/utils/auth'
import  editor  from '@/components/Editor/index'
  
  export default {
    name: "entranceEdit",
    components: {quillEditor,editor},
    data() {
      return {
        open:false,
        headers: {
            Authorization: 'Bearer ' + getToken()
        },
        // 遮罩层
        loading: false,
        entranceFormData:{
            title:undefined,
            semester:undefined,
            context:undefined,
            status:"1"
        },
        viewData:{},
        // 编辑器配置
        editorOption: {
            placeholder: '在这里输入内容',
            modules: {
            toolbar:{
                container:[
                    ['bold', 'italic', 'underline', 'strike'], //  加粗、倾斜、下划线、删除线
                    ['blockquote', 'code-block'],// 引用代码块
                    [{'header': 1}, {'header': 2}], // 标题，键值对应的形式，1，2 表示字体大小
                    [{'list': 'ordered'}, {'list': 'bullet'}], // 列表
                    [{'script': 'sub'}, {'script': 'super'}], // 上下标
                    [{'indent': -1}, {'indent': +1}], // 缩进
                    [{'direction': 'rtl'}], // 文本方向
                    [{'size': ['small', false, 'large', 'huge']}], // 字体大小
                    [{'header': [1, 2, 3, 4, 5, 6, false]}], // 几级标题
                    [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
                    [{'font': []}], // 字体
                    [{'align': []}], // 对齐方式
                    ['clean'], //清除
                    ['image', 'video'], // 上传图片、上传视频
                ],
                handlers:{
                    'image': function (value) {
                        if (value) {
                            document.querySelector('#quill-upload input').click()
                        } else {
                            this.quill.format('image', false);
                        }
                    }
                }
            } 
            }
        },
        termTimeList:[],
        rules:{
            title:[{ required: true, message: "请填写标题", trigger: "blur" }],
            semester:[{ required: true, message: "请选择学期", trigger: "blur" }],
            context:[{ required: true, message: "请编辑迎新内容", trigger: "blur" }]
        },
        modelStyle: {
                width:'375px',
                height:'667px',
                overflow: 'auto'
            },
        selectModelData:'375,667'
      };
    },
    mounted() {
        let content = ''; // 请求返回值
        this.str = this.escapeStringHTML(content)
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill
        }
    },
    created() {
        this.getTermTimeList()
        const paramId = this.$route.query.id
        if(paramId){
            this.loading=true
            findEntranceProcessDetailById({id:paramId}).then(resp=>{
                this.entranceFormData = resp.data
                this.entranceFormData.semester = Number(resp.data.semester)
                this.loading=false
            })
        }
    },
    methods: {
        updateContext(val){
            this.entranceFormData.context = val
        },
        // 转码
        escapeStringHTML(str) {
            str = str.replace(/</g, '<');
            str = str.replace(/>/g, '>');
            return str
        },
        onclickForm() {
            console.log(this.content)
            this.content = ''
        },
        getTermTimeList() {
            //查询学期
            // this.loading = true;
            listTermtime({pageSize:100,pageNum:1,status:1}).then(response => {
                this.termTimeList = response.data.list;
            });
        },
        submitForm(){
            const _this = this
            console.log(this.entranceFormData)
            
            this.loading = true
            this.$refs["form"].validate(valid => {
                if (valid) {
                    addOrUpdateEntranceProcess(this.entranceFormData).then(resp=>{
                        this.loading = false
                        this.$confirm('提交成功，是否停留在该页面', "警告", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "success"
                        }).then(() => {
                            _this.reset()
                        }).catch(function() {
                            _this.$router.push("/yingxin/entranceProcess")
                        });
                    })
                }else{
                    this.loading = false
                }
            })
        },
        cancel(){
            this.$router.push("/yingxin/entranceProcess")
        },
        reset(){
            this.entranceFormData={
                title:undefined,
                semester:undefined,
                context:undefined,
                status:"1"
            }
        },
        viewContent(){
            this.open=true
            this.viewData = this.entranceFormData
            const context = this.entranceFormData.context.replace(/<img/gi,"<img width='100%'")
            this.viewData.context = context

        },
        selectModel(val){
            alert(val)
            const items = val.split(',')
            this.modelStyle = {
                width:items[0]+'px',
                height:items[1]+'px',
                overflow: 'auto'
            }


        }
    }
  };
  </script>
<style scoped lang="scss">
  ::v-deep .ql-editor {
    min-height: 300px;
  }
  ::v-deep .el-form-item__error{
    left: 50px;
  }
  .modelDiv{
    border: 1px solid rgb(112, 111, 111);
    margin: 0 auto; 
    border-radius: 5px;
    
  } 
</style>